// import {
// BrowserRouter as Router,
// HashRouter as Router,
// MemoryRouter as Router,
// Route,
// Link,
// Switch,
// } from 'react-router-dom';

import {
  BrowserRouter as Router,
  // HashRouter as Router,
  // MemoryRouter as Router,
  Route,
  Link,
  Switch,
  useRouteMatch,
  useHistory,
  useLocation,
  useParams,
  withRouter,
  Prompt,
} from './yl-react-router';

import { Component, useState } from 'react';
import './App.css';

import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import NotFoundPage from './pages/NotFoundPage';
import UserPage from './pages/UserPage';

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/">首页</Link>
        <Link to="/user">用户</Link>
        <Link to="/login">登录</Link>
        <Link to="/product/123">动态路由</Link>
        <Link to="/prompt">prompt</Link>
        <Link to="/xxx/zzz">404</Link>

        {/* Switch: 独占路由，返回第一个匹配的 */}
        {/* 
          渲染优先级：children > component > render
          没有 Switch包裹的时候，使用children渲染的Route会始终显示在页面上
        */}
        {/* 
            渲染组件使用component，传递函数的时候推荐使用 children或render，不推荐给component传递一个匿名函数，component底层用的React.createElement，会造成性能问题
        */}
        <Switch>
          <Route
            // children={() => <div>children page</div>}
            component={HomePage}
            // render={() => <div>render page</div>}
            path="/"
            exact
          />
          <Route component={UserPage} path="/user" />
          <Route component={LoginPage} path="/login" />
          <Route component={Product} path="/product/:id" />
          <Route component={ClassPrompt} path="/prompt" />
          <Route component={NotFoundPage} />
        </Switch>
      </Router>
    </div>
  );
}

// 函数式组件使用 hooks
// function Product({ location, match }) {
//   const { params, url } = match;
//   const { id } = params;
//   console.log('==>', useRouteMatch(), useHistory(), useLocation(), useParams());
//   return (
//     <div>
//       <p>product-{id}</p>
//       <Link to={url + '/detail'}>详情</Link>
//       <Route path={url + '/detail'} component={ProductDetail} />
//     </div>
//   );
// }

// 类组件用 hoc，类似 react-redux
@withRouter
class Product extends Component {
  render() {
    console.log('this.props ==>', this.props);
    const { params, url } = this.props.match;
    const { id } = params;
    return (
      <div>
        <p>product-{id}</p>
        <Link to={url + '/detail'}>详情</Link>
        <Route path={url + '/detail'} component={ProductDetail} />
      </div>
    );
  }
}

function ProductDetail(props) {
  console.log('ProductDetail==>', props);
  return <p>ProductDetail</p>;
}

function ClassPrompt(props) {
  const [show, setShow] = useState(true);

  return (
    <div>
      <h3>ClassPrompt</h3>
      <button
        onClick={() => {
          setShow(!show);
        }}
      >
        {show.toString()}
      </button>
      <Prompt when={show} message="test prompt" />
    </div>
  );
}

export default App;
